<template>
  <!--直播 -->
  <el-form class="spellpage" :model="formData" label-width="100px">
    <el-form-item label="列表标题">
      <el-input
        type="text"
        v-model="formData.title"
        placeholder="请输入列表标题"
        show-word-limit
        maxlength="14"
      >
      </el-input>
    </el-form-item>
    <el-form-item label="展示直播数量">
      <el-row :gutter="15">
        <el-col :span="7" style="padding-left: 0px">
          <el-input-number
            :min="0"
            step-strictly
            :step="1"
            :controls="false"
            v-model="formData.count"
          ></el-input-number>
        </el-col>
        <el-col :span="15">根据直播列表置顶排序展示</el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="列表样式">
      <el-radio-group v-model="formData.listStyle">
        <el-radio :label="1">大图模式</el-radio>
        <el-radio :label="2">一行两个</el-radio>
        <el-radio :label="3">横向滑动</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="页面边距">
      <el-row :gutter="15">
        <el-slider
          v-model="formData.pagePadding"
          :show-tooltip="false"
          :show-input="true"
          :max="30"
        ></el-slider>
      </el-row>
    </el-form-item>
    <el-form-item label="上下间距">
      <el-row :gutter="15">
        <el-slider
          v-model="formData.goodsPadding"
          :show-tooltip="false"
          :show-input="true"
          :max="30"
        ></el-slider>
      </el-row>
    </el-form-item>
    <el-form-item label="图片倒角">
      <el-radio-group v-model="formData.doodsAngle">
        <el-radio :label="2">直角</el-radio>
        <el-radio :label="1">圆角</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import HomeLive from "./HomeLive";

interface Sytles {
  label: string;
  value: string;
}

@Component
export default class HomeLiveForm extends Vue {
  @Prop()
  formData: HomeLive;
}
</script>

<style lang="scss">
@import "@/assets/styles/decoration/spellGroup";
</style>
